$White:#fff;
$Gray:#666;
$mainColor:#07aefc;
$fontSize:.28rem;
$title-fontSize:.32rem;
$height:.85rem;

//引入项目图标库（来自阿里巴巴矢量图标库）
@import url('//at.alicdn.com/t/font_383899_bjqqg3qyu33j714i.css');

//初始化(init)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,header,nav,section,article,footer,figure,figcaption,aside { margin:0; padding:0; box-sizing:border-box;}
body { background:#fff; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:1rem; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { text-decoration:none; }
img { border:none; }
ol,ul,li { list-style:none; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}

html {
  font-size: 15.625vw;
}
body{
    font-size:$fontSize;
    line-height:150%;
    background-color:#e9eaee;
}

//weui reset
#area .weui-check:checked + i:before{color:$mainColor;}

.weui-cells{
    font-size:$fontSize;
    margin-top:0;
}

.weui-cell{
    height:$height;
    line-height:$height;
    padding:0 15px;
    overflow:hidden;
}
.weui-cell__bd,
.weui-cell__bd input{height:100%; background-color:transparent;}

//uilt
.text-center{text-align:center;}

.text-left{text-align:left;}

.text-right{text-align:right;}

.errTip{
    width:100%;
    height:$height; 
    line-height:$height; 
    background-color:#fff; 
    color:red; 
    text-align:center; 
    display:none;
}

.confirm,.cancel{
    display:block;
    height:100%;
}
.cancel{
    background-color:$White;
    color:$Gray;
}

.confirm{
    background-color:$mainColor;
    color:$White;
}

.shadow-box-1,
.shadow-box-2,
.shadow-box-4{
    transform: rotate(-23deg);
    -webkit-transform: rotate(-23deg);
}

.shadow-box-1{ left:-3.28rem; top:38%; }

.shadow-box-2{ left:-1.93rem; bottom:16.66666%; }

.shadow-box-3{
    right:-2.8rem;
    top:1.9rem;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
}

.shadow-box-4{ right:-1.16rem; bottom:9.66666%; }

.warmTips{
    width:50%;
    font-size:$fontSize;
    position:fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.warmTips img{ width:100%; height:auto; display:block; margin-bottom:.32rem; }

//头部 (header)
.header{
    position:relative;
    width:100%;
    height:$height;
    line-height:$height;
    background-color:#3a393e;
    color:$White;
    padding-left:15px;
    padding-right:15px;
    
    h1{
        font-size:$title-fontSize; 
        font-weight: 100; 
        letter-spacing: .01rem;
    }
    
    .go-back{
        position:absolute;
        top:0;
        left:15px;
        font-size:$title-fontSize;
    }
}

//
#project-comment i{font-size:$title-fontSize;}

.page-header{
    padding:15px;
    background-color:$mainColor;
    color:$White;
    
    .page-title{
        font-size:$title-fontSize;
        font-weight:bold;
        margin-bottom:.25rem;
    }
    
    p{
        font-size:$fontSize;
        margin-bottom:.15rem;
    }
    
    .icon-row,.icon-row i{
        font-size:.24rem;
        white-space: nowrap;
    }
    
    .icon-row i{margin-right:.1rem;}
}

.page-body,
.page-footer{
    background-color:$White;
    padding-top:.45rem;
    padding-right:15px;
    padding-left:15px;
}

.page-body{
    width:100%;
    
    p{
        color:$Gray;
        line-height:180%;
        text-align:Justify;
    }
}

.section-title{
    width:26.66666%;
    height:.7rem;
    line-height:.7rem;
    background-color:#23a8f5;
    color:$White;
    margin:0 auto .45rem auto;
    transform:skew(-20deg,0);
    -webkit-transform:skew(-20deg,0); 
    position:relative;
    
    h2{ 
        font-size:.3rem;
        transform:skew(20deg,0);
        -webkit-transform:skew(20deg,0);
    }    
    
    &:before,
    &:after{
        display:block;
        content:"";
        width:.04rem;
        height:.75rem;
        background-color:$mainColor;
        position:absolute;
    }
    
    &:before{
        left:-0.12rem;
        top:-0.12rem;
    }
    
    &:after{
        right:-0.12rem;
        bottom:-0.12rem;
    }
}

.page-footer{
    padding-bottom:.8rem;
    
    .tags span{
        display:inline-block;
        background-color:#e8f8ff;
        color:$mainColor;
        border-radius:6px;
        height:.56rem;
        line-height:.56rem;
        padding-left:20px;
        padding-right:20px;
        margin:8px;
        font-size:$fontSize;
    }
}

//底部 （footer）
.footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:$height;
    line-height:$height;
    background-color:#23a8f5;
    letter-spacing: .1rem;
}

//picker
.picker{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:999;
    background-color:rgba(0,0,0,0.5);
    
    .picker-inner{
        width:100%;
        background-color:#fff;
        position:absolute;
        bottom:0;
    }
    
    .picker-content{
        width:100%;
        height:45vh;
    }
    
    .picker-hd{
        height:9vh;
        line-height:9vh;
        border-bottom:1px solid #f6f6f6;
        overflow:hidden;
        text-align: center;
        padding-left:15px;
        padding-right:15px;
        box-sizing:border-box;
        
        .picker-cancel{float:left !important; color:#666;}
        .picker-confirm{float:right !important; color:$mainColor;}
        a{text-decoration: none;}
    }
    
    .picker-bd{
        width:100%;
        height:36vh;
        color:#c2c2c2;
        overflow:hidden;
        
        .picker-selected{
            width:100%;
            height:.65rem;
            line-height:.65rem;
            text-align:center;
            border-top:1px solid #f6f6f6;
            border-bottom:1px solid #f6f6f6;
            position:relative;
            top:50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            box-sizing:border-box;
            
            span{
                height:inherit;
                line-height: inherit;
                display: block;
            }
        }
        
        .swiper-container{position:relative!important; overflow: visible!important;}
        .swiper-wrapper{ position:absolute; top:0; width:100%;}
        .swiper-wrapper,.swiper-slide{background-color:transparent!important;}
        .swiper-slide-active{color:#2f2f2f;}
    }
}

